<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="850px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="checkItemModel"
      ref="checkItemForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目编号" label-width="110px" prop="code">
            <el-input :maxlength="32" v-model="checkItemModel.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名" label-width="110px" prop="name">
            <el-input :maxlength="32" v-model="checkItemModel.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="膳食类型" label-width="110px" prop="typeId">
            <el-select class="parent-router-select"  v-model="checkItemModel.typeId">
              <el-option v-for="item in mealsTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="100g含能量" label-width="110px" prop="energy">
            <el-input :maxlength="32" v-model="checkItemModel.energy" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="蛋白质含量" label-width="110px" prop="protein">
            <el-input :maxlength="32" v-model="checkItemModel.protein" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="脂肪含量" label-width="110px" prop="fat">
            <el-input :maxlength="32" v-model="checkItemModel.fat" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="碳水化合物含量" label-width="110px" prop="carbohydrate">
            <el-input :maxlength="32" v-model="checkItemModel.carbohydrate" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每kcal能量" label-width="110px" prop="kcal">
            <el-input :maxlength="32" v-model="checkItemModel.kcal" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每kj能量" label-width="110px" prop="kj">
            <el-input :maxlength="32" v-model="checkItemModel.kj" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="高血压" label-width="110px" prop="hbp">
            <el-radio-group v-model="checkItemModel.hbp">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="糖尿病" label-width="110px" prop="diabetes">
            <el-radio-group v-model="checkItemModel.diabetes">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="冠心病" label-width="110px" prop="chd">
            <el-radio-group v-model="checkItemModel.chd">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="脑卒中" label-width="110px" prop="stroke">
            <el-radio-group v-model="checkItemModel.stroke">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="心血管疾病" label-width="110px" prop="cacd">
            <el-radio-group v-model="checkItemModel.cacd">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高血脂" label-width="110px" prop="hyperlipidemia">
            <el-radio-group v-model="checkItemModel.hyperlipidemia">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="肥胖" label-width="110px" prop="obesity">
            <el-radio-group v-model="checkItemModel.obesity">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通风" label-width="110px" prop="ventilate">
            <el-radio-group v-model="checkItemModel.ventilate">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="禁用" prop="status">
            <el-switch v-model="checkItemModel.status"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="说明" prop="explain">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="3"
              v-model="checkItemModel.explain"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('checkItemForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveMeals, updateMeals } from "@/api/dingming/dietaryLibrary";

export default {
  name: "checkItem-edit",
  data() {
    return {
      loading: false,
      checkItemModel: {
        id: "",
        code: "",
        name: "",
        typeId: "",
        energy: "",
        protein: "",
        fat: "",
        carbohydrate: "",
        kcal: "",
        kj: "",
        hbp: "",
        diabetes: "",
        chd: "",
        stroke: "",
        cacd: "",
        hyperlipidemia: "",
        obesity: "",
        ventilate: "",
        explain: "",
        status: false,
        createtime: "",
        updatetime: "",
        tMealsType: {
          id: "",
          name: "",
          createtime: "",
          updatetime: ""
        }
      },
      dialogProps: {
        visible: false, //控制对话框弹出收起
        action: "", //存入add || edit
        title: "" //存入对话框标题
      },
      mealsTypeList: []
    };
  },
  methods: {
    /**
     * 点击确定按钮后判断是添加还是修改
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveCheckItem();
          } else {
            this.doUpdateCheckItem();
          }
        } else {
          return false;
        }
      });
    },
    /**
     * 修改的提交方法
     */
    doUpdateCheckItem() {
      this.loading = true;
      updateMeals(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 添加的提交方法
     */
    doSaveCheckItem() {
      this.loading = true;
      saveMeals(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 点击取消按钮
     */
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    /**
     * 弹框时触发的函数
     * 用来清除表单验证
     */
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["checkItemForm"].clearValidate();
      });
    },
    /**
     * 错误提示
     */
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  /**
   * 传入父组件的方法
   * 用来判断用户点击的按钮是删除还是添加
   */
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditCheckItemDialog", function(checkItem,mealsType) {
        this.mealsTypeList = mealsType;
        console.log(this.mealsTypeList)
        this.checkItemModel = checkItem;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改食物";
        this.dialogProps.visible = true;
      }),
        this.$on("openAddCheckItemDialog", function(mealsType) {
          this.checkItemModel = {};
          this.mealsTypeList = mealsType;
          console.log(this.mealsTypeList)
          this.dialogProps.action = "add";
          this.dialogProps.title = "添加食物";
          this.dialogProps.visible = true;
        });
    });
  }
};
</script>

<style lang="scss" scoped>
.parent-router-select {
  width: 100%;
}
.CheckItem-info-tab-pane {
  margin-top: 10px;
}
</style>





